<template>
  <div class="article">
    <div class="title">
      <div class="detail-icon">
        <van-image round width="1.5rem" height="1.5rem" :src="icon"/>
        <span class="nickname">{{ nickname }}</span>
      </div>
      <UserCtrl :id="id" />
    </div>
    <div @click="gotoArticleItemContent(id)">
      <p class="title-c" v-if="title">{{ title }}</p>
      <p class="cont">{{ content }}
      </p>
      <div class="pic-list">
        <div class="pic">
          <van-image class="pic-img" v-for="i in pic_list" :src="i.img" />
        </div>
      </div>

    </div>
    <div class="my-tag">
      <div v-for="item in tag_list" class="my-tag-item"
        @click="$router.push({ name: 'micircle', query: { id: item.id } })">

        <van-image width="1rem" height="1rem" v-if="item.img" :src="item.img" />
        <span class="my-tag-name">{{ item.tag }}</span>
      </div>
    </div>
    <div class="hot-comment" v-if="hot_comment">
      <div class="comment"><span class="name" v-if="hot_comment.name">{{ hot_comment.name }}:</span>
        <span>{{ hot_comment.comment }}</span>
      </div>
      <div class="belong-place">{{ hot_comment.belong_place }}</div>
    </div>
    <CardCtrl :praise_num="praise_num" :answer_num="comment_num" :id="id"
    :my_up="props"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CardCtrl from '../../../../components/CardCtrl.vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const cont = ref({});
const props = defineProps<{
  id: number,
  nickname: string,
  icon: string,
  content_type: number,
  title: string,
  content: string,
  praise_num: string,
  comment_num: string,
  hot_comment: ({
    name: string,
    comment: string,
    belong_place: string,
  } | null)
  // name?:string,
  // comment:string,
  // belong_place:string,
  pic_list: Array<{
    img: string
  }>
  tag_list: Array<{
    id: number,
    tag: string,
    tag_type: number,
    tag_id: string,
    img: string,
  }>,
  video_list?: Array<{
    video_url: string,
    cover: string,
    duration: number,
  }>,
}>();
cont.value = props;
function gotoArticleItemContent(curid: string | number) {
  router.push({ name: 'article', query: { id: curid } })

}

</script>

<style scoped lang="scss">
.article {
  padding: 10px;
  background-color: #fff;
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-icon {
  display: flex;
  align-items: center;
}

.title .nickname {
  font-size: .78rem;
  margin-left: .3rem;
}

.title-c {
  margin: .6rem 0rem;
  font-size: .95rem;
}

.cont {
  font-size: .85rem;
  color: #757575;
  margin: .625rem 0rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}



.my-tag {
  width: 100%;
  margin-bottom: .3rem;
  display: flex;
  flex-wrap: wrap;
  .my-tag-item {
  display: flex;
  align-items: center;
  padding: .3rem 0rem;
  background-color: #f6f6f6;
  margin-right: 1.25rem;
  border-radius: .3rem;
  .my-tag-name {
  padding: 0rem .3rem;
  font-size: .8rem;
  color:#757575;
}
}
}


.hot-comment {
  margin: .625rem 0rem;
  padding: .625rem;
  background-color: #f6f6f6;
  border-radius: .375rem;

}

.comment {
  font-size: .85rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.comment .name {
  width: 3.75rem;
  color: #757575;
  padding-right: .3rem;
}

.comment p {
  margin: 0;
}

.belong-place {
  font-size: .85rem;
  color: #757575;
}

.pic-list {
  margin-bottom: .625rem;
  overflow: hidden;
}

.pic {
  display: flex;
  justify-content: space-between;
}

:deep(.pic .van-image__img) {
  max-width: 80vw;
  max-height: 20vh;
  border-radius: .375rem;
}
</style>